<template>
  <div>
    <div style="padding-left: 30px;padding-right: 30px" >
      <el-form :inline="true" :model="typeDto"  class="demo-form-inline">

        <el-row :gutter="20">
          <!--          操作人-->
          <el-col :span="8">
            <!--输入框-->
            <el-form-item label="物资名称：">
              <el-input v-model="typeDto.name"  placeholder="物资名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--        date-->
            <el-select v-model="typeDto.status" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <!--查询按钮-->
            <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="add"
          v-hasPermi="['system:post:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <div>
      <!--      表格显示-->
      <el-table :data="Data" border style="width: 100%" ref="multipleTable" >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="物资类型名称 "
        ></el-table-column>
        <el-table-column
          prop="default_weight"
          label="默认重量"
        ></el-table-column>
        <el-table-column
          prop="default_volume"
          label="默认体积"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="说明"
        ></el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          sortable
          width="180"
          column-key="date"
          :filters="[{text: '正常', value:1}, {text: '异常', value:0}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status" style="color: #00afff">正常</span>
            <span v-else style="color: red">异常</span>
          </template>
        </el-table-column>

        <el-table-column label="删除" width="150">
          <template slot-scope="scope">

            <el-button slot="reference" size="mini"
                       type="text"
                       @click="del(scope.row.id)"
            >删除</el-button>
            <el-button slot="reference" size="mini"
                       type="text"
                       @click="upd(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      添加修改-->

      <div>
        <el-dialog :title="addupd==true?'添加物资类型':'修改物资类型'" :visible.sync="outerVisible" class="custom-dialog">
          <el-form ref="form" :model="type" label-width="80px">

            <el-form-item label="类型名称:">
              <el-input v-model="type.name"></el-input>
            </el-form-item>
            <el-form-item label="默认重量:">
              <el-input-number v-model="type.default_weight" :min="1" :max="1000" ></el-input-number>
            </el-form-item>
            <el-form-item label="默认体积:">
              <el-input-number v-model="type.default_volume" :min="1" :max="1000" ></el-input-number>
            </el-form-item>
            <el-form-item label="状态：">
              <el-radio-group v-model="type.status">
                <el-radio label='1' value='1'>启用</el-radio>
                <el-radio label='0' value='0'>禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="说明:">
              <el-input v-model="type.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="add2" v-if="addupd">新增</el-button>
              <el-button type="warning" @click="upd2" v-if="addupd==false">修改</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <el-pagination
        @size-change="size"
        @current-change="curren"
        :current-page="typeDto.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size=typeDto.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import {pageGoodsType ,addGoodsType,updGoodsType,delGoodsType} from '@/api/pd-base/branches/goods-type.js'
import { delStation } from '@/api/pd-auth/station'
export default {
  data(){
    return{
      type:{
        name:'',
        status:'1',
        default_weight:'',
        default_volume:'',
        remark:'',
      },
      addupd:true,
      options: [{
        value: '0',
        label: '禁用'
      }, {
        value: '1',
        label: '正常'
      }],
      outerVisible:false,
      typeDto:{
        name:'',
        status:'',
        pageNum:1,
        pageSize:5
      },
      Data:[],
      user:{},
      total:0,
    }
  },

  //创建生命周期树
  created() {
    this.page()
  },

  methods:{
    page(){
      pageGoodsType(this.typeDto).then(res => {
        this.Data=res.data.list
        this.total=res.data.total
      })


    },

    //状态
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

    size(val) {
      this.typeDto.pageSize = val
      this.page()
    },

    curren(val) {
      this.typeDto.pageNum=val
      this.page()
    },

    //删出
    del(val){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        delGoodsType(val).then(
          this.page()
        )
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //判断删除的数据是否为最后一页且最后一页只有一条数据
    total2(){
      pageGoodsType(this.typeDto).then(as=>{
        if (this.total!=as.data.total() && this.typeDto.pageNum==this.total && this.total!=1){
          this.total=this.typeDto.pageNum-1
        }
      })
    },

    //点击修改
    upd(val){
      this.addupd=false
      this.outerVisible=true
      this.type=val
      this.type.status=val.status+''
    },

    //点击添加
    add(){
      this.outerVisible=true
      this.addupd=true

    },

    //修改
    upd2(){
      updGoodsType(this.type).then()
      this.outerVisible=false
      this.type={}
      this.type.status='1'
      this.page()
    },
    //添加
    add2(){
      addGoodsType(this.type)
      this.outerVisible=false
      this.type={}
      this.type.status='1'
      this.page()
    },

  }
}
</script>

<style scoped>
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 设置容器高度 */
}

.span{
  flex: 15px;
}

.custom-dialog{
}

span{

  font-size: 16px; /* 设置字体大小 */
  margin: 30px;
}

.ss{
  margin: 10px;
}
</style>
